<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="robots" content="noindex" />
    <title>io-fx16</title>
    <meta name="author" content="iowen.cn" />
    <style>
      #bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: #0b5a99;
        background-image: linear-gradient(335deg, #0b5a99 0%, #49bee8 100%);
      }
      #bg canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="bg">
      <canvas></canvas>
      <canvas></canvas>
      <canvas></canvas>
    </div>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.min.js"></script>
    <script>
      ;(function ($) {
        var canvas = $('#bg').children('canvas'),
          background = canvas[0],
          foreground1 = canvas[1],
          foreground2 = canvas[2],
          config = {
            circle: {
              amount: 18,
              layer: 3,
              color: [157, 97, 207],
              alpha: 0.3
            },
            line: {
              amount: 12,
              layer: 3,
              color: [255, 255, 255],
              alpha: 0.3
            },
            speed: 0.5,
            angle: 20
          }

        if (background.getContext) {
          var bctx = background.getContext('2d'),
            fctx1 = foreground1.getContext('2d'),
            fctx2 = foreground2.getContext('2d'),
            M = window.Math, // Cached Math
            degree = (config.angle / 360) * M.PI * 2,
            circles = [],
            lines = [],
            wWidth,
            wHeight,
            timer

          requestAnimationFrame =
            window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            function (callback, element) {
              setTimeout(callback, 1000 / 60)
            }

          cancelAnimationFrame =
            window.cancelAnimationFrame ||
            window.mozCancelAnimationFrame ||
            window.webkitCancelAnimationFrame ||
            window.msCancelAnimationFrame ||
            window.oCancelAnimationFrame ||
            clearTimeout

          var setCanvasHeight = function () {
            wWidth = $(window).width()
            ;(wHeight = $(window).height()),
              canvas.each(function () {
                this.width = wWidth
                this.height = wHeight
              })
          }

          var drawCircle = function (x, y, radius, color, alpha) {
            var gradient = fctx1.createRadialGradient(x, y, radius, x, y, 0)
            gradient.addColorStop(
              0,
              'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + alpha + ')'
            )
            gradient.addColorStop(
              1,
              'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (alpha - 0.1) + ')'
            )

            fctx1.beginPath()
            fctx1.arc(x, y, radius, 0, M.PI * 2, true)
            fctx1.fillStyle = gradient
            fctx1.fill()
          }

          var drawLine = function (x, y, width, color, alpha) {
            var endX = x + M.sin(degree) * width,
              endY = y - M.cos(degree) * width,
              gradient = fctx2.createLinearGradient(x, y, endX, endY)
            gradient.addColorStop(
              0,
              'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + alpha + ')'
            )
            gradient.addColorStop(
              1,
              'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (alpha - 0.1) + ')'
            )

            fctx2.beginPath()
            fctx2.moveTo(x, y)
            fctx2.lineTo(endX, endY)
            fctx2.lineWidth = 3
            fctx2.lineCap = 'round'
            fctx2.strokeStyle = gradient
            fctx2.stroke()
          }

          var drawBack = function () {
            bctx.clearRect(0, 0, wWidth, wHeight)

            var gradient = []

            gradient[0] = bctx.createRadialGradient(
              wWidth * 0.3,
              wHeight * 0.1,
              0,
              wWidth * 0.3,
              wHeight * 0.1,
              wWidth * 0.9
            )
            gradient[0].addColorStop(0, 'rgb(0, 26, 77)')
            gradient[0].addColorStop(1, 'transparent')

            bctx.translate(wWidth, 0)
            bctx.scale(-1, 1)
            bctx.beginPath()
            bctx.fillStyle = gradient[0]
            bctx.fillRect(0, 0, wWidth, wHeight)

            gradient[1] = bctx.createRadialGradient(
              wWidth * 0.1,
              wHeight * 0.1,
              0,
              wWidth * 0.3,
              wHeight * 0.1,
              wWidth
            )
            gradient[1].addColorStop(0, 'rgb(0, 150, 240)')
            gradient[1].addColorStop(0.8, 'transparent')

            bctx.translate(wWidth, 0)
            bctx.scale(-1, 1)
            bctx.beginPath()
            bctx.fillStyle = gradient[1]
            bctx.fillRect(0, 0, wWidth, wHeight)

            gradient[2] = bctx.createRadialGradient(
              wWidth * 0.1,
              wHeight * 0.5,
              0,
              wWidth * 0.1,
              wHeight * 0.5,
              wWidth * 0.5
            )
            gradient[2].addColorStop(0, 'rgb(40, 20, 105)')
            gradient[2].addColorStop(1, 'transparent')

            bctx.beginPath()
            bctx.fillStyle = gradient[2]
            bctx.fillRect(0, 0, wWidth, wHeight)
          }

          var animate = function () {
            var sin = M.sin(degree),
              cos = M.cos(degree)

            if (config.circle.amount > 0 && config.circle.layer > 0) {
              fctx1.clearRect(0, 0, wWidth, wHeight)
              for (var i = 0, len = circles.length; i < len; i++) {
                var item = circles[i],
                  x = item.x,
                  y = item.y,
                  radius = item.radius,
                  speed = item.speed

                if (x > wWidth + radius) {
                  x = -radius
                } else if (x < -radius) {
                  x = wWidth + radius
                } else {
                  x += sin * speed
                }

                if (y > wHeight + radius) {
                  y = -radius
                } else if (y < -radius) {
                  y = wHeight + radius
                } else {
                  y -= cos * speed
                }

                item.x = x
                item.y = y
                drawCircle(x, y, radius, item.color, item.alpha)
              }
            }

            if (config.line.amount > 0 && config.line.layer > 0) {
              fctx2.clearRect(0, 0, wWidth, wHeight)
              for (var j = 0, len = lines.length; j < len; j++) {
                var item = lines[j],
                  x = item.x,
                  y = item.y,
                  width = item.width,
                  speed = item.speed

                if (x > wWidth + width * sin) {
                  x = -width * sin
                } else if (x < -width * sin) {
                  x = wWidth + width * sin
                } else {
                  x += sin * speed
                }

                if (y > wHeight + width * cos) {
                  y = -width * cos
                } else if (y < -width * cos) {
                  y = wHeight + width * cos
                } else {
                  y -= cos * speed
                }

                item.x = x
                item.y = y
                drawLine(x, y, width, item.color, item.alpha)
              }
            }

            timer = requestAnimationFrame(animate)
          }

          var createItem = function () {
            circles = []
            lines = []

            if (config.circle.amount > 0 && config.circle.layer > 0) {
              for (var i = 0; i < config.circle.amount / config.circle.layer; i++) {
                for (var j = 0; j < config.circle.layer; j++) {
                  circles.push({
                    x: M.random() * wWidth,
                    y: M.random() * wHeight,
                    radius: M.random() * (20 + j * 5) + (20 + j * 5),
                    color: config.circle.color,
                    alpha: M.random() * 0.2 + (config.circle.alpha - j * 0.1),
                    speed: config.speed * (1 + j * 0.5)
                  })
                }
              }
            }

            if (config.line.amount > 0 && config.line.layer > 0) {
              for (var m = 0; m < config.line.amount / config.line.layer; m++) {
                for (var n = 0; n < config.line.layer; n++) {
                  lines.push({
                    x: M.random() * wWidth,
                    y: M.random() * wHeight,
                    width: M.random() * (20 + n * 5) + (20 + n * 5),
                    color: config.line.color,
                    alpha: M.random() * 0.2 + (config.line.alpha - n * 0.1),
                    speed: config.speed * (1 + n * 0.5)
                  })
                }
              }
            }

            cancelAnimationFrame(timer)
            timer = requestAnimationFrame(animate)
            drawBack()
          }

          $(document).ready(function () {
            setCanvasHeight()
            createItem()
          })
          $(window).resize(function () {
            setCanvasHeight()
            createItem()
          })
        }
      })(jQuery)
    </script>
  </body>
</html>
